<!--
 * @Author: hutong huareu980@163.com
 * @Date: 2023-06-06 19:10:45
 * @LastEditors: hutong huareu980@163.com
 * @LastEditTime: 2023-09-14 14:29:39
 * @FilePath: /smart-web-app/pages/job/[id].vue
 * @Description: 
-->
<template>
  <div class="job-page">
    <div class="container">
      <div class="job-top">
        <div class="top-title">{{ info.position_name }}</div>
        <div class="top-info">
          {{ t("job.update") }} {{ info.update_time }}
          <span>｜</span>
          {{ info.position_type }}
          <span>｜</span>
          {{ info.position_address }}
        </div>
      </div>
      <div class="job-content">
        <div class="job-card">
          <div class="job-card-title">{{ t("job.basic") }}</div>
          <div class="job-card-flex">
            <div class="flex-item">
              <span>{{ t("job.section") }}：</span>
              <span>{{ info.department }}</span>
            </div>
            <div class="flex-item">
              <span>{{ t("job.edu") }}：</span>
              <span>{{ info.edu_requirements }}</span>
            </div>
            <div class="flex-item">
              <span>{{ t("job.limit") }}：</span>
              <span>{{ info.year_of_working }}</span>
            </div>
          </div>
        </div>
        <div class="job-card">
          <div class="job-card-title">{{ t("job.desc") }}</div>
          <div v-html="info.position_description"></div>
        </div>
        <div class="job-card">
          <div class="job-card-title">{{ t("job.demand") }}</div>
          <div v-html="info.position_requirements"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const { locale, t } = useI18n();
const route = useRoute();
const info = ref<any>({});
const { data } = <any>(
  await useGetFetch(`/p/${route.params.id}`, { lang: locale })
);
info.value = data.value.result?.[0];
</script>
<style scoped lang="scss">
.job-page {
  background-color: #fff;
  .job-top {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    .top-title {
      font-size: 24px;
      font-weight: bold;
    }
    .top-info {
      color: gray;
    }
  }

  .job-content {
    .job-card {
      padding: 30px 0;
      border-bottom: 1px solid #eee;
      .job-card-title {
        font-size: 16px;
        font-weight: bold;
      }
      p {
        color: gray;
        margin-top: 10px;
      }
      .job-card-flex {
        display: flex;
        margin-top: 20px;
        .flex-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          span {
            &:nth-child(1) {
              color: gray;
            }
            &:nth-child(2) {
              margin-top: 6px;
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}
</style>
